<template>
  <div class="user-dashboard">
    <!-- 侧边栏导航 -->
    <aside :class="['sidebar', { collapsed: isSidebarCollapsed }]">
      <div class="sidebar-header">
        <div class="logo-container">
          <svg class="logo" width="28" height="28" viewBox="0 0 24 24" fill="none">
             <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#3b82f6" stroke-width="2" stroke-linejoin="round"/>
             <path d="M2 17L12 22L22 17" stroke="#3b82f6" stroke-width="2" stroke-linejoin="round"/>
             <path d="M2 12L12 17L22 12" stroke="#3b82f6" stroke-width="2" stroke-linejoin="round"/>
          </svg>
          <h1 v-if="!isSidebarCollapsed" class="system-title">用户中心</h1>
        </div>
        <button class="sidebar-toggle" @click="toggleSidebar">
          <span class="toggle-icon">←</span>
        </button>
      </div>
      
      <nav class="nav-menu">
        <div class="nav-section" v-for="section in menuSections" :key="section.title">
          <h3 v-if="!isSidebarCollapsed" class="section-title">{{ section.title }}</h3>
          <ul class="nav-list">
            <li 
              v-for="menu in section.items" 
              :key="menu.id"
            >
              <a 
                href="#"
                :class="['nav-item', { active: currentView === menu.id }]"
                @click.prevent="currentView = menu.id"
                :title="isSidebarCollapsed ? menu.name : ''"
              >
                <span class="nav-icon" v-html="menu.icon_svg"></span>
                <span v-if="!isSidebarCollapsed" class="nav-text">{{ menu.name }}</span>
              </a>
            </li>
          </ul>
        </div>
      </nav>
      
      <div class="sidebar-footer">
        <a href="#" class="nav-item" @click.prevent="logout" :title="isSidebarCollapsed ? '退出登录' : ''">
          <span class="nav-icon" v-html="logoutIconSvg"></span>
          <span v-if="!isSidebarCollapsed" class="nav-text">退出登录</span>
        </a>
      </div>
    </aside>

    <!-- 主内容区域 -->
    <main class="main-content">
      <div class="content-wrapper">
        <BalanceQuery v-if="currentView === 'balance'" :userInfo="this.userInfo" :userCards="this.userCards"/>
        <DepositOperation v-if="currentView === 'deposit'" :userInfo="this.userInfo" :userCards="this.userCards" @update-balance="updateBalance" />
        <WithdrawOperation v-if="currentView === 'withdraw'" :userInfo="this.userInfo" :userCards="this.userCards" @update-balance="updateBalance" />
        <TransferOperation v-if="currentView === 'transfer'" :userInfo="this.userInfo" :userCards="this.userCards" @update-balance="updateBalance" />
        <CardManagement v-if="currentView === 'cardManagement'" :userInfo="this.userInfo" :userCards="this.userCards" @update-status="updateStatus" />
        <ChangePassword v-if="currentView === 'changePassword'" :userInfo="this.userInfo" :userCards="this.userCards" />
        <TransactionHistory v-if="currentView === 'transactions'" :userInfo="this.userInfo" :userCards="this.userCards" :transactions="this.transactions" />
      </div>
    </main>
  </div>
</template>

<script>
import BalanceQuery from './user/BalanceQuery.vue'
import DepositOperation from './user/DepositOperation.vue'
import WithdrawOperation from './user/WithdrawOperation.vue'
import TransferOperation from './user/TransferOperation.vue'
import CardManagement from './user/CardManagement.vue'
import ChangePassword from './user/ChangePassword.vue'
import TransactionHistory from './user/TransactionHistory.vue'
import axios from "axios";
export default {
  props: {
        userID: {
          type: String,
          required: true,
        },
      },
  name: 'UserDashboard',
  components: {
    BalanceQuery,
    DepositOperation,
    WithdrawOperation,
    TransferOperation,
    CardManagement,
    ChangePassword,
    TransactionHistory
  },
  data() {
    return {
      formData: {
          adminID: 10011001,
          adminName: 'admin',
          adminPass: '10011001',
          customerID: '',
      },
      currentView: 'balance',
      isSidebarCollapsed: false,
      userInfo: {
        address: "string",
        customerID: 0,
        customerName: "string",
        pid: "string",
        telephone: "string"
      },
      userCards: {
      },
      transactions: {
      },
      menuSections: [
        {
          title: '账户管理',
          items: [
            { id: 'balance', name: '余额查询', icon_svg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/><path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/><path d="M18 12a2 2 0 0 0 0 4h4v-4h-4z"/></svg>' },
            { id: 'deposit', name: '存款', icon_svg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>' },
            { id: 'withdraw', name: '取款', icon_svg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 17V3M7 10l5-5 5 5"/><path d="M21 21H3"/></svg>' },
            { id: 'transfer', name: '转账', icon_svg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z"/><path d="M12 18h.01"/><path d="M7 11h10M7 7h10"/></svg>' },
          ]
        },
        {
          title: '账户安全',
          items: [
            { id: 'cardManagement', name: '挂失管理', icon_svg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>' },
            { id: 'changePassword', name: '修改密码', icon_svg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>' },
          ]
        },
        {
          title: '交易记录',
          items: [
            { id: 'transactions', name: '交易记录', icon_svg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1"/><path d="M9 14l2 2 4-4"/></svg>' },
          ]
        },
      ],
      logoutIconSvg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>'
    }
  },
  methods: {
    updateTime() {
      const now = new Date()
      this.currentTime = now.toLocaleString('zh-CN')
      this.formData.customerID = this.userID;
      // console.log('页面已加载')
      // console.log(this.formData)
      axios.post(
          'http://localhost:8057/user/selectByID', this.formData
        ).then(res => {
          // console.log(res)
          if (res.data.code === 200) {
            this.userInfo = res.data.data
          }else {
            console.log(res.data.msg)
          }
        })

        axios.post(
            'http://localhost:8057/card/getAllCardByID', this.formData
        ).then(res => {
          // console.log(res)
          if (res.data.code === 200) {
            this.userCards = res.data.data
          }else {
            console.log(res.data.msg)
          }
        })

      axios.post(
          'http://localhost:8057/trade/selectAll', this.formData
        ).then(res => {
          // console.log(res)
          if (res.data.code === 200) {
            this.transactions = res.data.data
          }else {
            console.log(res.data.msg)
          }
        })


    },
    toggleSidebar() {
      this.isSidebarCollapsed = !this.isSidebarCollapsed;
    },
    logout() {
      // 退出登录逻辑
      this.$emit('logout')
    },
    updateBalance(amount) {
      // 更新用户余额
      this.userInfo.balance += amount
    },
    updateStatus(status) {
      // 更新用户状态
      this.userInfo.status = status
    }
  },
  watch: {
  },
  mounted() {
    this.updateTime()
    this.refreshInterval = setInterval(this.updateTime, 1000)

  }
}
</script>

<style scoped>
.user-dashboard {
  display: flex;
  height: 100vh;
  width: 100vw;
  background-color: #f8fafc;
  overflow: hidden;
}

/* --- Sidebar --- */
.sidebar {
  width: 220px;
  background-color: #ffffff;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  transition: width 0.3s ease-in-out;
  padding: 16px;
  box-sizing: border-box;
}
.sidebar.collapsed {
  width: 80px;
  padding: 16px 8px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px;
  height: 48px;
  box-sizing: border-box;
}
.sidebar.collapsed .sidebar-header {
  justify-content: center;
}
.sidebar.collapsed .sidebar-toggle {
  display: none;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #111827;
}
.system-title {
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
}
.sidebar.collapsed .system-title {
  display: none;
}

.sidebar-toggle {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #4b5563;
  cursor: pointer;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.sidebar-toggle:hover {
  background: #f3f4f6;
  transform: scale(1.1);
}

.nav-menu {
  flex-grow: 1;
  padding-top: 24px;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Hide scrollbar */
.nav-menu::-webkit-scrollbar { display: none; }
.nav-menu { -ms-overflow-style: none; scrollbar-width: none; }

.section-title {
  padding: 0 16px 8px 16px;
  font-size: 12px;
  font-weight: 500;
  color: #9ca3af;
  text-transform: uppercase;
  white-space: nowrap;
}
.sidebar.collapsed .section-title {
  text-align: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 10px 0;
  margin: 16px 0;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  margin: 4px 0;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  color: #4b5563;
  transition: all 0.2s ease-in-out;
  gap: 16px;
}
.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 16px;
}

.nav-item:hover:not(.active) {
  background-color: #f3f4f6;
  color: #1f2937;
}

.nav-item.active {
  background-color: #3b82f6;
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.nav-item.active .nav-icon :deep(svg),
.nav-item.active .nav-icon {
  stroke: white;
}
.nav-item:hover:not(.active) .nav-icon {
  stroke: #1f2937;
}
.nav-item .nav-icon :deep(svg) {
  transition: stroke 0.2s ease-in-out;
}

.nav-icon {
  display: flex;
  align-items: center;
}
.nav-icon :deep(svg) {
  width: 20px;
  height: 20px;
  stroke: #9ca3af;
  transition: stroke 0.2s ease-in-out;
}

.sidebar.collapsed .nav-text {
  display: none;
}

.sidebar-footer {
  padding-top: 16px;
  margin-top: auto;
  border-top: 1px solid #e5e7eb;
}
.sidebar-footer .nav-item:hover {
  background-color: #f3f4f6;
}

/* --- Main Content --- */
.main-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 24px;
}

.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}
</style> 